Published on

Vuepress2 + Vercel Cli 搭建博客 2022

node --version
v16.19.1

直接使用了reco主题的cli安装。

http://v2.vuepress-reco.recoluan.com/docs/guide/getting-started.html

npm install @vuepress-reco/theme-cli@1.0.7 -g
# 初始化,并选择 2.x
theme-cli init

npm install

然后是主题配置

http://v2.vuepress-reco.recoluan.com/docs/theme/introduce.html

npm install vuepress@next vuepress-theme-reco@next --save-dev

修改代码,将footer的 vuepress-theme-reco@2.0.0-beta.41 去掉,文件路径如下:

项目/node_modules/vuepress-theme-reco/lib/client/components/Home/Footer.vue

    <span>
<!--      <Xicons-->
<!--        icon="Palette"-->
<!--        link="http://v2.vuepress-reco.recoluan.com"-->
<!--        target="_blank"-->
<!--        :text="`vuepress-theme-reco@${version}`"-->
<!--      />-->
      Ray Wei's Blog
    </span>

https://zenn.dev/coedo/articles/vuepress-vite-blog#windi-css-(tailwind-css)-%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B

https://lucas-yang.vercel.app/

https://github.com/ycs77/star-note-lucas-vuepress

https://pengzhanbo.cn/note/vuepress-theme-plume/write-article/

https://www.npmjs.com/package/@vuepress-plume/vuepress-theme-plume

https://www.npmjs.com/package/vuepress-theme-book

https://vuepress-theme-book.netlify.app/

https://www.npmjs.com/package/vuepress-theme-hope

https://vuepress-theme-hope.github.io/v2/

https://xxyan0205.github.io/vuepress-theme-quicksand/

https://github.com/xxyan0205/vuepress-theme-quicksand#readme

vercel-cli

vercel-cli,在本地直接打包上传至 vercel

安装

npm i -g vercel
or
yarn global add vercel

安装成功后,初始化 vercel

vercel

依提示键入注册 vercel 使用的邮箱 3. 从邮箱激活账户 激活后,命令行会提示如下

√ Email confirmed Congratulations! You are now logged in. In order to deploy something, run vercel. 💡 Connect your Git Repositories to deploy every branch push automatically (https://vercel.link/git).

  1. 初始化项目
vercel deploy

依据提示关联或新建一个项目,当询问

In which directory is your code located

直接跳过即可。

之后,会生成1个网站地址,暂时忽略。

此时就可以在根路径看到 .vercel 的文件夹了,反过来说如果不存在该文件夹,则失败了。

  1. 新建 deploy.sh 文件 键入
#!/usr/bin/env sh
set -e

# 生成静态文件
npm run docs:build

cp -rvf .vercel docs/.vuepress/dist
# 进入生成的文件夹
cd docs/.vuepress/dist

vercel --prod

cd -
  1. 在命令行键入 ./deploy.sh 测试 一键打包成功后,即可看到正常的页面。
  2. 其他命令 ./pushToGit.sh
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
#set -e
time=$(date "+%Y-%m-%d %H:%M:%S")
#当未配置远端时,将下方的 # 移除
#git remote set-url origin  https://gitee.com/sickeeer/blog-resource.git
git add -A
git commit -m "$time"
git push -u origin master

至此,我们就可以优雅的将源码提交至代码库,而 build 的文件直接上传至 vercel

再也不用忍受 github 的龟速,再也不用忍受 vercel 的龟速打包,再也不用苦逼的打包后上传静态文件!

优雅万岁!


https://110501.com/2021/03/23/how-to-use-vercel/

https://juejin.cn/post/6980134339434512421

https://vuepress-theme-hope.github.io/v2/

vuepress2遇到的问题

1.java代码中的范型会提示出错

2.md文件中的html代码会提示报错

https://blog.csdn.net/sinat_31213021/article/details/119449772

https://blog.51cto.com/wangshiyu/5267194